<template>
	<view>
		<!-- 普通弹窗 background-color="#ffffff" -->
		<uni-popup :is-mask-click="false" ref="popup" type="center">
			<view>
				<view class="w-pop" style="background: #ffffff;">
					<view class="base-title">设置优惠券</view>
					<view class="item-box">
						<view class="label-box">优惠金额：</view>
						<view class="flex item-center fs-12">
							<input v-if="!formData.id" type="digit" placeholder="请输入" class="inp-box" v-model="formData.amount" @blur="formData.amount=numberFormat($event.detail.value)">
							<text v-else class="color-primary">{{formData.amount}}</text>
							元
						</view>
					</view>
					<view class="item-box">
						<view class="label-box"></view>
						<view class="flex item-center fs-12">
							满
							<input v-if="!formData.id" type="digit" placeholder="请输入" class="inp-box special" v-model="formData.fullAmount">
							<text v-else class="color-primary">{{formData.fullAmount}}</text>
							元可用
						</view>
					</view>
					<view class="item-box">
						<view class="label-box">上架数量：</view>
						<view class="flex item-center fs-12">
							<input type="number" placeholder="请输入" class="inp-box" v-model="formData.totalNum">张
						</view>
					</view>
					<view class="item-box" v-if="formData.id">
						<view></view>
						<view class="fs-12 text-color-hint">已领取{{formData.usedNum}}张，剩余{{formData.remainNum}}张</view>
					</view>
					<view class="item-box">
						<view class="label-box">使用期限：</view>
						<view class="flex item-center fs-12">
							<input v-if="!formData.id" type="number" placeholder="请输入" class="inp-box" v-model="formData.dayLimit">
							<text v-else class="color-primary">{{formData.dayLimit}}</text>
							天
						</view>
					</view>
					<view class="item-box">
						<view class="label-box">兑换需积分：</view>
						<view class="flex item-center fs-12">
							<input type="digit" placeholder="请输入" class="inp-box" v-model="formData.requiredPoints" @blur="formData.requiredPoints=numberFormat($event.detail.value)">分
						</view>
					</view>
					<view class="item-box">
						<view class="label-box">上架时间：</view>
						<uni-datetime-picker v-model="formData.effectiveTime" isDefaultTime>
							<view class="flex justify-end item-center">
								<text class="text-color-hint">{{ formData.effectiveTime ? formData.effectiveTime : '未设置' }}</text>
								<image class="w-16 h-17 ml-4" src="@/static/svg/icon-arrow-right.svg"></image>
							</view>
						</uni-datetime-picker>
					</view>
					<view class="flex item-center btn-box">
						<view class="cancal-btn" @click="showPop(false)">取消</view>
						<view class="submit-btn" @click="submit">保存</view>
					</view>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script setup>
	import {ref,reactive,defineEmits,computed} from 'vue';
	import {saveCouponApi} from '@/pagesJ/api/index.js'
	import { numberFormat } from '@/utils/index.js'
	import dayjs from 'dayjs';
	
	const emit = defineEmits(['refresh'])
	const formData = ref({})
	const popup = ref()
	const showPop = async (value, data) => {
		if (value) {
			if(data){
				Object.assign(formData.value, data);
			}else{
				formData.value = {}
				formData.value.effectiveTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
			}
			popup.value && popup.value.open('center')
		} else {
			popup.value && popup.value.close()
		}
	}
	const submit = async () => {
		if (!formData.value.amount) {
			uni.showToast({
				icon: 'none',
				title: '请填写优惠金额'
			})
			return
		}
		if (!formData.value.fullAmount && formData.value.fullAmount != 0) {
			uni.showToast({
				icon: 'none',
				title: '请填写满元可用'
			})
			return
		}
		if (!formData.value.totalNum) {
			uni.showToast({
				icon: 'none',
				title: '请填写上架数量'
			})
			return
		}
		if (!formData.value.dayLimit) {
			uni.showToast({
				icon: 'none',
				title: '请填写使用期限'
			})
			return
		}
		if (!formData.value.requiredPoints) {
			uni.showToast({
				icon: 'none',
				title: '请填写兑换需积分'
			})
			return
		}
		if (!formData.value.effectiveTime) {
			uni.showToast({
				icon: 'none',
				title: '请填写上架时间'
			})
			return
		}
		saveCouponApi(formData.value).then(res => {
			uni.showToast({
				icon: 'none',
				title: '保存成功'
			})
			emit('refresh')
			showPop()
		})
	}
	defineExpose({
		showPop
	})
</script>

<style scoped lang="scss">
	.pick {
		font-size: 40px;
		color: rgba(51, 51, 51, .61);
	}

	.w-pop {
		background: #fffff;
		border-radius: 8px;
		padding: 20px 0px 0 0px;
		width: 320px;
	}

	.base-title {
		font-size: 20px;
		font-weight: 600;
		line-height: 28px;
		margin-bottom: 10px;
		text-align: center;
	}

	.item-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10px 20px;
	}

	.label-box {
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		color: rgba(51, 51, 51, 1);
		margin: 6px 0;
	}

	.inp-box {
		background: rgba(245, 245, 245, 1);
		height: 32px;
		border-radius: 12px;
		padding: 0 10px;
		line-height: 32px;
		border: 1px solid rgba(245, 245, 245, 1);
		width: 120px;
		&.special{
			width: 67px;
			height: 25px;
			line-height: 25px;
		}
		&.unactive {
			border-color: #FA4543;
		}
	}

	.btn-box {
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		margin-top: 20px;
		line-height: 40px;
	}

	.cancal-btn {
		width: 50%;
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 400;
		text-align: center;
		color: rgba(51, 51, 51, 0.6);
		border-right: 1px solid rgba(0, 0, 0, 0.1);
	}

	.submit-btn {
		width: 50%;
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 400;
		text-align: center;
		color: rgba(250, 69, 67, 1);
	}
</style>
